<template>
  <div>
    <Card dis-hover class="bgd-content">
      <div slot="title">
          <div class="filtr-inline">
            <span>订单类型：</span>
                <Select v-model="form.type" clearable style="width:100px">
                    <Option :value="item.id" v-for="item in types" :key="item.id">{{item.name}}</Option>
                </Select>
          </div>
          <div class="filtr-inline">
            <span>订单编号：</span><i-input v-model="form.order_no" placeholder="请输入..." style="width: 140px"></i-input>
          </div>
          <div class="filtr-inline">
              <Button type="primary" @click="getList">搜索</Button>
          </div>
      </div>
      <div>
        <Table :loading="loading" :columns="columns" :data="data"></Table>
      </div>
    </Card>
    <div class="page-block">
      <Page :total="total" :current="form.page" @on-change="onChangePage"></Page>
    </div>

      <Modal v-model="show" width="700" footer-hide title="采购订单">
        <p slot="header" style="text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>采购订单</span>
        </p>

        <Form ref="formBase" :model="formBase" :rules="ruleValidate" :label-width="80" inline>
            <div>
              <h3>基本信息</h3>

            </div>
            <FormItem label="订单号" prop="order">
                <Input v-model="formBase.order_no" disabled placeholder="系统生成" style="width: 130px"></Input>
            </FormItem>
            <FormItem label="供应商" prop="supplier_id">
                <Select v-model="formBase.supplier_id" :disabled="disabled" style="width:130px">
                    <Option :value="item.id" v-for="item in suppliers" :key="item.id">{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem label="仓库" prop="warehouse_id">
                <Select v-model="formBase.warehouse_id" :disabled="disabled" style="width:130px">
                    <Option :value="item.id" v-for="item in entrepots" :key="item.id">{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem label="订单类型" prop="type">
                <Select v-model="formBase.type" :disabled="disabled" style="width:130px">
                    <Option :value="item.id" v-for="item in types" :key="item.id">{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem label="制单人" prop="create_user">
              <Input v-model="formBase.create_user" disabled style="width: 130px"></Input>
            </FormItem>
            <div class="product-list">
              <h3>商品</h3>
              <div class="row title">
                <h4>商品名称</h4>
                <h4>商品数量</h4>
                <h4>商品单价</h4>
                <h4>操作</h4>
              </div>
              <div class="row" v-for="(pro, index) in formBase.product" :key="index">
                <div>
                  <Select v-model="pro.product_id" style="width:120px">
                      <Option :value="item.id" :label="item.name" v-for="item in products" :key="item.id">
                        <span>{{item.name}}</span>
                        <span style="padding-left:10px;float:right;color:#ccc">建议价格：{{item.purchase}}元</span>
                        <span style="padding-left:10px;float:right;color:#ccc">编码：{{item.code}}</span>
                      </Option>
                  </Select>
                </div>
                
                <div>
                  <Input v-model="pro.num" :disabled="disabled" style="width: 120px"></Input>
                </div>

                <div>
                  <Input v-model="pro.price" :disabled="disabled" style="width: 120px"></Input>
                </div>

                <div>
                  <ButtonGroup>
                      <Button :disabled="disabled" type="primary" @click="onClickAddProduct(index)">添加</Button>
                      <Button :disabled="disabled" type="error" @click="onClickDelProduct(index)">删除</Button>
                  </ButtonGroup>
                </div>
              </div>

            </div>
            <FormItem label="备注" prop="remark">
                <Input :disabled="disabled" v-model="formBase.remark" type="textarea" style="width: 550px" :autosize="{minRows: 4,maxRows: 4}"></Input>
            </FormItem>
        </Form>

        <div class="bgd-cotent">
          <div slot="footer" style="text-align:center">
            <Button type="warning" size="large" :loading="rejected" style="margin-right:20px;" @click="onClickRejected()">驳回</Button>
            <Button type="success" size="large" :loading="ok" @click="onClickOk()">通过</Button>
          </div>
        </div>
    </Modal>


  </div>
</template>
<script>
import { _getList, _product, _audit } from '@/api/order.js'
import { _getAllEntrepot, _getAllProduct, _getAllSupplier } from '@/api/selects.js'

export default {
  name: 'check',
  data () {
    return {
      id: 0,
      rejected: false,
      ok: false,
      loading: true,
      disabled: false,
      total: 0,
      show: false,
      form: {
        type: '',
        order_no: '',
        audit: 0,
        status: 0,
        page: 1
      },
      // 提交保存数据
      formBase: {
        id: '',
        supplier_id: '',
        warehouse_id: '',
        type: '',
        remark: '',
        create_user: 'test',
        product: [{
          product_id: 0,
          num: null,
          price: null
        }]
      },
      entrepots: [],
      products: [],
      suppliers: [],
      types: [
        {
          id: 1,
          name: '入库进货'
        },
        {
          id: 2,
          name: '入库退货'
        }
      ],
      audit: [ // 审批
        {
          id: 0,
          name: '未审批'
        },
        {
          id: 1,
          name: '通过'
        },
        {
          id: 2,
          name: '异常'
        }
      ],
      ckAudit: [ // 仓库审核
        {
          id: 0,
          name: '未核实'
        },
        {
          id: 1,
          name: '核实'
        },
        {
          id: 2,
          name: '异常'
        }
      ],
      ruleValidate: {
        name: [
          { required: true, message: '商品名称不能为空'},
        ],
        specification: [
          { required: true, message: '规格不能为空'},
        ],
        unit_id: [
          { required: true, message: '单位不能为空'},
        ],
        type_id: [
          { required: true, message: '分类不能为空'},
        ],
        purchase: [
          { required: true, message: '参考进价不能为空'},
        ],
        price: [
          { required: true, message: '参考售价不能为空'},
        ],
      },
      columns: [
        {
            title: '订单号',
            key: 'order_no',
            tooltip: true,
            width: 160
        },
        {
            title: '供应商',
            key: 'gys',
            tooltip: true
        },
        {
            title: '仓库',
            key: 'ck'
        },
        {
            title: '类型',
            key: 'type',
            render: (h, params) => {
              if (params.row.type == 1) {
                return h('div', {
                  style: {
                    'color': '#01AAED'
                  }
                }, '进货')
              }else {
                return h('div', {
                  style: {
                    'color': '#FF5722'
                  }
                }, '退货')
              }

            }
        },
        {
            title: '总价',
            key: 'total_price',
            render: (h, params) => {
              return h('div', {
                style: {}
              }, params.row.total_price + '元')
            }
        },
        {
            title: '创建时间',
            key: 'create_time',
            render: (h, params) => {
              return h('div', {
                style: {}
              }, params.row.create_time.split(' ')[0])
            }
        },
        {
            title: '审批',
            key: 'audit',
            render: (h, params) => {
              let temp = '未审批'
              this.audit.forEach(element => {
                  if (element.id == params.row.audit) {
                    temp = element.name
                  }
              });
              return h('div', {
                style: {}
              }, temp)
            }
        },
        {
            title: '核实',
            key: 'status',
            render: (h, params) => {
              let temp = '未核实'
              this.ckAudit.forEach(element => {
                  if (element.id == params.row.status) {
                    temp = element.name
                  }
              });
              return h('div', {
                style: {}
              }, temp)
            }
        },
        {
            title: '操作',
            key: 'action',
            width: 130,
            render: (h, params) => {
                return h('div', [
                    h('Button', {
                        props: {
                            type: 'primary',
                            size: 'small'
                        },
                        style: {
                            marginRight: '5px'
                        },
                        on: {
                            click: () => {
                              this.$refs['formBase'].resetFields()
                              this.formBase = JSON.parse(JSON.stringify(params.row))
                              this.id = params.row.id
                              // 获取商品
                              this.$Message.loading({
                                content: '加载商品中...',
                                duration: 0
                              })
                              _product({id: params.row.id}).then(res => {
                                this.formBase.product = res.data.data
                                this.$Message.destroy()
                                this.disabled = true
                                this.show = true
                              })
                            }
                        }
                    }, '查看'),
                    h('Button', {
                         props: {type: 'error', size: 'small'},
                    }, [
                        h('Poptip', {
                            props: {
                                confirm: true,
                                transfer: true,
                                placement: 'left-end',
                                title: '确定要删除吗！',
                                type: 'error',
                                size: 'small',
                            },
                            on: {
                                'on-ok': () => {
                                  _delData({id: params.row.id}).then( res => {
                                      const obj = res.data
                                      if (obj.status == 1){
                                          this.$Message.success(obj.msg);
                                          this.getList()
                                      }else {
                                          this.$Message.error(obj.msg);
                                      }
                                  })
                                },
                            }
                        }, '删除')
                    ])
                ]);
            }
        },
      ],
      data: []
    }
  },
  methods: {
    onChangePage (page) {
      this.form.page = page
      this.getList()
    },
    onClickAddProduct (id) {
      this.formBase.product.splice(
        id + 1,
        0,
        {
          product_id: null,
          num: null,
          price: null
        }
      )
    },
    onClickDelProduct (id) {
      if (this.formBase.product.length == 1){
        this.$Message.error('商品必须大于一条')
        return
      }
      this.formBase.product.splice(id, 1)
    },
    // 不同意
    onClickRejected () {
      if (this.id == 0 || this.id == '') {
        this.$Message.error('错误')
        return
      }
      this.rejected = true
      _audit({id: this.id, audit: 2}).then(res => {
          const obj = res.data
          if (obj.status == 1){
              this.getList()
              this.show = false
              this.$Message.success(obj.msg)
          }else {
            this.$Message.error(obj.msg)
          }
          this.rejected = false
      })
    },
    // 同意
    onClickOk () {
      if (this.id == 0 || this.id == '') {
        this.$Message.error('错误')
        return
      }
      this.ok = true
      _audit({id: this.id, audit: 1}).then(res => {
          const obj = res.data
          if (obj.status == 1){
              this.getList()
              this.show = false
              this.$Message.success(obj.msg)
          }else {
            this.$Message.error(obj.msg)
          }
          this.ok = false
      })
    },
    // 获取数据
    getList () {
      this.loading = true
      _getList(this.form).then( res => {
        const obj = res.data.data
        this.total = obj.total
        this.data = obj.data
        this.loading = false
      })
    }
  },
  mounted() {
    this.getList()
    _getAllEntrepot({}).then( res => {
        this.entrepots = res.data.data
    })

    _getAllProduct({}).then( res => {
        this.products = res.data.data
    })

    _getAllSupplier({}).then( res => {
        this.suppliers = res.data.data
    })
  },
}
</script>

<style scoped>
.bgd-cotent h3 {
    margin-top: 30px;
}
.bgd-cotent .row{
    line-height: 40px;
    display: flex;
}
.bgd-cotent .row span {
    width: 80px;
    text-align: right;
    padding-right: 10px;
}
.bgd-row {
    display: flex;
    justify-content: space-between;
}
.bgd-row>div{
    width: 50%;
}
.product-list{
  margin-bottom: 20px;
}
.product-list .row.title{
  background: #e2e2e2;
  height: 25px;
  line-height: 25px;
  margin: 0 30px;
  border-radius: 4px 4px 0px 0px;
  padding-top: 0px;
}
.product-list .row h4{
  text-align: center;
}
.product-list .row {
  background: #f2f2f2;
  margin: 0 30px;
  padding-top: 10px;
  display: flex;
  justify-content: space-around;
}
.product-list .row:last-child{
  padding-bottom: 10px;
}
</style>
